import React, { useEffect, useState, useRef, useMemo } from 'react';
import { NavigationProp, RouteProp } from '@react-navigation/native';
import { StyleSheet, TouchableOpacity, View, Text, Image, TextInput, Button, Alert, TouchableHighlight } from 'react-native';
import { CommonStyle } from '../../../common/commonStyle.ts';
import { Loading } from '../../../component/LoadingOverlay.tsx';

import FontAwesome6 from 'react-native-vector-icons/FontAwesome6';
import HomeRequest from '../../../request/homeRequest.ts';
import CustomFlatList from '../../../component/CustomFlatList.tsx';
import { useReactive } from 'ahooks';
import { Badge, Actionsheet, useDisclose, Stack, Center, ScrollView } from 'native-base';
import { useToast } from 'react-native-toast-notifications';
import Tools from '../../../utils/Tools.ts';

interface IRescueProgressProps {
  navigation: NavigationProp<any, 'rescueProgress'>;
  route: RouteProp<{ rescueProgress: any }, 'rescueProgress'>;
}

interface IData {
  rescueList: IRescueRes[];
  refreshing: boolean;
  isLoading: boolean;
  pageNo: number;
  totalPage: number;
}

const RescueProgress: React.FC<IRescueProgressProps> = ({ navigation, route }) => {
  const data = useReactive<IData>({
    rescueList: [],
    refreshing: false,
    isLoading: false,
    pageNo: 1,
    totalPage: 0,
  });

  const callPhone =(item:IRescueRes) =>{
    Tools.callPhone(item.phone)
  }

  const renderItem = (item: IRescueRes, index: number) => {
    return (
      <View style={styles.container}>
        <View style={[styles.title, styles.flexView]}>
          <View style={[styles.flexView, styles.titleLeft]}>
            <FontAwesome6 name="user-large" size={20}></FontAwesome6>
            <Text style={{ marginLeft: 4, fontSize: 16, color: '#000' }}>{item.waiterName}</Text>
          </View>
          <TouchableOpacity onPress={()=>{
            callPhone(item)
          }} style={[styles.flexView, styles.titleRight]}>
            <FontAwesome6 name="phone" size={20}></FontAwesome6>
            <Text style={{ marginLeft: 4, fontSize: 16, color: '#000' }}>{item.encryptionPhone}</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.line}></View>
        <View style={styles.info}>
          <View style={styles.flexView}>
            <Text style={{color:'#000'}}>救援状态：</Text>
            {item.jobType === 1 ? (
              <Badge colorScheme="success" alignSelf="center" variant="subtle">
                取AED中
              </Badge>
            ) : (
              <Badge colorScheme="info" alignSelf="center" variant="subtle">
                救援中
              </Badge>
            )}
          </View>
          <View style={{ marginTop: 4 }}>
            <Text style={{color:'#000'}}>参与救援时间：{item.firstAidDate}</Text>
          </View>
        </View>
      </View>
    );
  };

  const fetchRescueList = () => {
    Loading.show("加载中")
    HomeRequest.GetRescueList({
        orderId:route.params!.orderId
    }).then(res=>{
        Loading.hide()
        if(res.data.length>0){
            data.rescueList = res.data.map(item=>{
              return {
                ...item,
                encryptionPhone:Tools.ProtectingPhoneNumbers(item.phone)
              }
            })
        }
    }).catch(err=>{
        Loading.hide()
    })
  };

  /**
   * 列表刷新
   */
  const customListRefresh = () => {
    // data.refreshing = true;
    // data.pageNo = 1;
    // data.totalPage = 1;
    data.rescueList = [];
    fetchRescueList();
  };

  useEffect(() => {
    fetchRescueList();
  }, []);

  return <CustomFlatList data={data.rescueList} style={{ paddingHorizontal: 10, paddingVertical: 16 }} renderItem={({ item, index }) => renderItem(item, index)} refreshing={data.refreshing} isLoading={data.isLoading} onEndReached={fetchRescueList} onRefresh={customListRefresh} />;
};
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    padding: 10,
    marginBottom: 10,
    borderRadius: 8,
  },
  flexView: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  title: {},
  titleLeft: {
    flex: 1,
  },
  titleRight: {
    flex: 1,
    justifyContent: 'flex-end',
  },
  line: {
    marginVertical: 10,
    borderBottomWidth: 1,
    borderColor: '#ddd',
  },
  info: {},
});
export default RescueProgress;
